<template>
    <div class="list" ref="listWrapper">
      <div>
        <div class="hot-cities">
          <div class="hot-cts-title">热门城市</div>
          <ul class="clearfix">
            <li v-for="item of computedCities" :key="item.id"
              :class="item.borderType"
              @click="handleCityName(item.name)">
              {{item.name}}
            </li>
          </ul>
        </div>
        <div class="alphabet-menu">
          <div class="alphabet-menu-title">
            字母排序
          </div>
          <ul class="clearfix"  @click="handleClick">
            <li v-for="(item,index) of letters" :key="index">{{item}}</li>
          </ul>
        </div>
        <div class="alphabet-list" v-for="(item,key) of cities"
          :key="key" :ref="key">
          <div class="alphabet-list-title">{{key}}</div>
          <ul class="clearfix">
            <li class="border-top" v-for="Item of item"
              :key="Item.id"
              @click="handleCityName(Item.name)">{{Item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
import BScrool from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hotCities: Array,
    cities: Object
  },
  data: function () {
    return {
      letter: ''
    }
  },
  methods: {
    handleClick: function (e) {
      this.letter = e.target.innerHTML
    },
    handleCityName: function (city, e) {
      this.$store.dispatch('changeCityName', city)
      // 编程式路由导航push方法
      this.$router.push({
        name: 'Home'
      })
    }
  },
  computed: {
    letters: function () {
      var letters = []
      for (var i in this.cities) {
        letters.push(i)
      }
      return letters
    },
    computedCities: function () {
      let result = []
      let length = this.hotCities.length
      let item
      for (let i = 0; i < length; i++) {
        let resObj = {}
        item = this.hotCities[i]
        resObj.name = item.name
        resObj.id = item.id
        if (item.order === 1) {
          resObj.borderType = ''
        } else if (item.order === 2 || item.order === 3) {
          resObj.borderType = 'border-left'
        } else if (item.order % 3 === 1) {
          resObj.borderType = 'border-top'
        } else {
          resObj.borderType = 'border-topleft'
        }
        result.push(resObj)
      }
      return result
    }
  },
  mounted: function () {
    this.scroll = new BScrool(this.$refs.listWrapper)
    // console.log(this.$refs.listWrapper)  cnpm install better-scroll --save
    // 安装better-scroll 然后实例化BScrool
  },
  watch: {
    letter: function () {
      if (this.letter) {
        var element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  }
}
</script>

<style>
  div{
    box-sizing: border-box;
  }
  .clearfix::after{
    display: block;
    content: "";
    clear: both;
  }
  .list{
    position:absolute;
    top: .88rem;
    left: 0;
    bottom: 0;
    right: 0;
    overflow:hidden;
  }
  .hot-cities{
    width: 100%;
    height: 4.32rem;
  }
  .hot-cities .hot-cts-title,
  .alphabet-menu .alphabet-menu-title,
  .alphabet-list .alphabet-list-title{
    width: 100%;
    height: .72rem;
    line-height: .72rem;
    padding: 0 .2rem;
    background-color:#f5f5f5;
  }
  .hot-cities ul li{
    float: left;
    width: 33.33%;
    height: .9rem;
    line-height: .9rem;
    text-align: center;
  }
  .alphabet-menu ul li{
    float: left;
    width: 16.66%;
    height: .9rem;
    line-height: .9rem;
    text-align:center;
  }
  .alphabet-list ul li{
    float: left;
    width: 25%;
    height: .9rem;
    line-height: .9rem;
    text-align: center;
  }
</style>
